<!DOCTYPE html>
<html>
<head>
    <title>欢迎使用后台管理系统</title>
    <meta charset="utf-8">
    <%- include ../default.html%>
    <link href="/public/css/main.css" rel="stylesheet" type="text/css"/>
    <link href="/public/css/user-manage.css" rel="stylesheet" type="text/css"/>
    <link href="/public/plugins/wangEditor/wangEditor.min.css" rel="stylesheet" type="text/css"/>
    <!-- <link href="/public/plugins/highlight/css/default.css" rel="stylesheet" type="text/css"/> -->
    <style type="text/css">
        .el-row{
            margin-bottom: 10px;
        }
        #editor .w-e-text-container{
            height: 520px !important;
        }
        .el-tabs{
            min-height: 75px;
        }
        .el-tag+.el-tag{
            margin-left: 10px;
        }
        h1{
            font-size:2em !important;
        }
        .el-cascader-menus.el-popper{z-index: 99999 !important;}
    </style>
</head>
<body>
    <%- include header.html%>
    <section>
        <%- include menu.html%>
        <aside class="content" id="content">
            <el-form :inline="false" v-model="formModel" class="demo-form-inline api-user">
                <el-row :gutter="20">
                    <el-col :sm="8" :md="6" :lg="4">
                        <el-cascader placeholder="请选择文章分类" expand-trigger="hover" :options="options" v-model="formModel.classType" :props="props" @change="handleChange"></el-cascader>     
                    </el-col> 
                    <el-col :sm="16" :md="18" :lg="20">
                        <el-input  auto-complete="off" v-model="formModel.title" placeholder="请输入文章标题"></el-input>
                    </el-col>    
                </el-row>
                <el-row :gutter="20">
                    <el-col :sm="24" :md="24" :lg="24">
                        <div id="editor"></div>
                    </el-col>   
                </el-row>
                <el-row :gutter="20">
                    <el-col :sm="24" :md="24" :lg="24">
                        <template>
                            <el-tabs v-model="activeName" @tab-click="handleTabClick">
                                <el-tab-pane v-for="(vo,index) in tagList" :label="vo.tagName" :name="vo.id" :key="index">
                                    <template>
                                        <el-checkbox v-for="(co,index1) in vo.children" v-model="co.checked" :key="index1" @change="changeCheckState(co)">{{co.tagName}}</el-checkbox>
                                    </template>
                                </el-tab-pane>
                            </el-tabs>
                        </template>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :sm="24" :md="24" :lg="24">
                        <span class="el-tag">已选择的标签(最多5个):</span>
                        <el-tag v-for="(tag,index) in checkdTags" :key="tag.name" closable type="success"  @close="closeCheckdedTag(tag)">{{tag.tagName}}</el-tag>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :sm="24" :md="24" :lg="24" style="text-align:center;">
                        <el-button type="danger" plain @click="publishWen(0)">存为草稿</el-button>
                        <el-button type="primary" plain @click="publishWen(1)">保存发布</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </aside>
    </section>
    <script src="/public/plugins/wangEditor/wangEditor.js"></script>
    <script src="/public/js/main.js"> </script>
    <script src="/public/js/articlePublish.js"></script>
</body>
</html>
